<template>
  <div class="content-console">
    <div>
      <el-container id="console-container">
        <el-aside id="cosole-aside" style="width:200px">
          <el-menu
            style="width: 80%;"
            default-active="console-index"
            id="menu"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item @click="show = 'console-index'" index="console-index">
              <span slot="title" >工作台</span>
            </el-menu-item>
            <el-menu-item @click="show = 'article-manage'" index="article-manage">
              <span slot="title">作品管理</span>
            </el-menu-item>
            <el-menu-item @click="show = 'comment'" index="comment">
              <span slot="title">作品评价</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main id="console-main">
          <article-manage v-if="show === 'article-manage'" />
          <console-index v-if="show === 'console-index'" />
          <comment v-if="show === 'comment'" />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import ArticleManage from "./view/ArticleManage.vue";
import ConsoleIndex from "./view/ConsoleIndex.vue";
import Comment from "./view/Comment.vue"
export default {
  components: {
    "article-manage": ArticleManage,
    "console-index":ConsoleIndex,
    "comment":Comment,
  },
  data() {
    return {
      show: "console-index",
    };
  },
  created(){
    this.show = "console-index";
  }
};
</script>

<style>
::-webkit-scrollbar {
  display: none;
}
.content-console {
  height: 100%;
  width: 80%;
  margin: auto;
  overflow:scroll /* x y 方向都会*/
}
#console-container {
  margin-top: 20px;
}
#cosole-aside {
  width: 10%;
}
#console-main {
  width: 85%;
  height: 100%;
  padding: 0;
  background-color: white;
  margin-left: 10px;
  margin-right: 10px;
}
</style>